<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<style>
			[data-role="slider"] img{ display: block;}
		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="slider_section" data-role="section" class="active" data-aside-left="#left_reveal_aside">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>滑动组件</h1>
				    </div>
				    <div id="tabbarOuter" data-scroll="horizontal">
				    	<div class="scroller" style="width:500px;">
						    <div class="tabbar" style="width:100%;">
						    	<a class="tab active" data-role="tab" href="#page1" data-toggle="page">头条</a>
						    	<a class="tab" data-role="tab" href="#page2" data-toggle="page">南京</a>
						    	<a class="tab" data-role="tab" href="#page3" data-toggle="page">江苏</a>
						    	<a class="tab" data-role="tab" href="#page4" data-toggle="page">国内</a>
						    	<a class="tab" data-role="tab">国际</a>
						    	<a class="tab" data-role="tab">国际</a>
						    	<a class="tab" data-role="tab">国际</a>
						    	<a class="tab" data-role="tab">国际</a>
						    </div>
					    </div>
				    </div>
				</header>
				<article data-role="article" id="main_article" class="active" style="top:88px;bottom:56px;overflow: hidden;">
					<div id="sliderPage" data-role="slider" class="full">
						<div class="scroller">
							<div id="page1" class="slide" data-role="page" data-scroll="pulldown">
								<div class="scroller">
									<div id="slide" data-role="slider" class="full" style="height: 230px;overflow: hidden;">
										<div class="scroller">
											<div class="slide">
												<img src="assets/app/img/slide1.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
											<div class="slide">
												<img src="assets/app/img/slide2.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
											<div class="slide">
												<img src="assets/app/img/slide3.jpg" class="full-width"/>
												<div class="slider_label">综合新闻</div>
											</div>
										</div>
									</div>
									<ul class="listitem">
										<li class="sliver">用法</li>
								        <li>
								            <div class="text">
								            	Silder组件不会自动初始化，可以使用A.Slider(#id, opts)方式调用
								            </div>
								        </li>
								        <li class="sliver">opts说明</li>
								        <li>
								            <div class="text">
								            	opts对象包括：auto、dots和change三个参数
								            </div>
								        </li>
								        <li>
								            <div class="text">
								            	auto：true|false|number，是否自动播放，默认false
								            </div>
								        </li>
								        <li>
								            <div class="text">
								            	dots：center|left|right|hide，焦点的位置，默认center
								            </div>
								        </li>
								        <li>
								            <div class="text">
								            	change：函数，slider切换后的回调函数，默认接受参数为当前slide的位置
								            </div>
								        </li>
								        <li class="sliver">监听事件</li>
								        <li>
								            <div class="text">
								            	目前仅对.slide样式元素可以触发事件：slidershow和sliderhide
								            </div>
								        </li>
								        <li>
								            <div class="text">
								            	当某个.slide元素显示的时候触发slidershow事件，当隐藏的时候触发sliderhide事件
								            </div>
								        </li>
							    	</ul>
						    	</div>
							</div>
							<div id="page2" class="slide" data-role="page" data-scroll="verticle">
								<div class="scroller">
									这是第2个page
							    </div>
							</div>
							<div id="page3" class="slide" data-role="page" data-scroll="verticle">
								<div class="scroller">
									这是第3个page
							    </div>
							</div>
							<div id="page4" class="slide" data-role="page" data-scroll="verticle">
							<div class="scroller">
								这是第4个page
						    </div>
						</div>
						</div>
					</div>
				</article>
				<footer>
					<nav class="menubar">
						<a class="menu active" data-role="tab" href="#page1" data-toggle="page">
							<span class="menu-icon iconfont iconline-mail"></span>
						    <span class="menu-text">邮件</span>
						</a>
						<a class="menu" data-role="tab" href="#page2" data-toggle="page">
							<span class="menu-icon iconfont iconline-notebook"></span>
						    <span class="menu-text">通讯录</span>
						</a>
						<a class="menu" data-role="tab" href="#page3" data-toggle="page">
							<span class="menu-icon iconfont iconline-file"></span>
						    <span class="menu-text">审批</span>
						</a>
						<a class="menu" data-role="tab" href="#page4" data-toggle="page">
							<span class="menu-icon iconfont iconline-map-location"></span>
						    <span class="menu-text">定位</span>
						</a>
					</nav>
				</footer>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		<script>
		
		$('#slider_section').on('sectionshow', function(){
			A.Component.scroll('#tabbarOuter');
		});
		$('#main_article').on('articleload', function(){
			A.Slider('#slide', {
				dots : 'right'
			});			
			A.Slider('#sliderPage', {
				dots : 'hide'
			});
		});
		</script>
		
	</body>
</html>